<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">修改手机号码</span></x-header>
        </header>
        <main class="main">
            <ul class="list">
                <li class="listItem">
                    <label for="">输入手机号:</label>
                    <input class="input" type="number" placeholder="请输入新手机号" v-model.trim="iphone">
                    <span @click="countDown">{{textVal}}</span>
                </li>
                <li class="listItem">
                    <label for="">输入验证码:</label>
                    <input type="text" placeholder="请输入验证码" v-model.trim="yzm">
                </li>
                <li class="listItem">
                    <label for="">输入登录密码:</label>
                    <input type="text" placeholder="请输入登录密码" v-model.trim="pwd">
                </li>
            </ul>
            <div class="backBtn">
                <div class="btn" @click="queryBtn">
                    <x-button class="xbtn">确定</x-button>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import { XHeader, XButton } from 'vux';
// import { setInterval, clearInterval } from 'timers';
import Qs from 'qs';
export default {
    name: 'Password',
    data () {
        return {
            textVal: '获取验证码',
            count: 60,
            canClick: true, //添加canClick
            iphone: '',
            yzm: '',
            pwd: '',
            password: ''
        }
    },
    components: {
        XHeader,
        XButton
    },
    created () {
        this.password = JSON.parse(sessionStorage.getItem('userInfo')).loginPwd
    },
    methods: {
        countDown () {
            if (!this.canClick) return
            this.canClick = false
            this.textVal = this.count + 's后重新获取'
            let clock = window.setInterval(() => {
                this.count--
                this.textVal = this.count + 's后重新获取'
                if (this.count < 0) {
                    window.clearInterval(clock)
                    // this.textVal = '重新获取'
                    this.textVal = '获取验证码'
                    this.count = 60
                    this.canClick = true  //这里重新开启
                }
            },1000)
        },
        queryBtn () {
            const reg = /^1[34578]\d{9}$/;
            const pwdReg = /^[\w]{6,16}$/;
            const yzmReg = /[0-9]{4}/;
            let iphone = reg.test(this.iphone)
            let pwd = pwdReg.test(this.pwd)
            let yzm = yzmReg.test(this.yzm)
            if (iphone && yzm && pwd && (this.pwd == this.password)) {
                sessionStorage.setItem('loginIphone', this.iphone)
                // console.log('手机号修改成功')
                // this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/iphone',Qs.stringify({
                //     newIhpone: this.iphone,
                //     message: this.yzm,
                //     password: this.pwd
                // })).then((res) => {
                //     setTimeout(() => {
                //         this.$router.push({
                //             name: 'Account',
                //             params: {
                //                 iphone: this.iphone
                //             }
                //         })
                //     }, 600)
                // })
            }
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
}
.list{
    width: 100%;
    .listItem{
        width: 100%;
        height: 1.333333rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem .48rem;
        position: relative;
        background: #fff;
        label{
            display: block;
            width:  2.373333rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(82,82,82,1);
            line-height:17px;
            letter-spacing:1px;
        }
        input{
            width: 6.666667rem;
            height: 100%;
            outline: none;
            border: none;
        }
        span {
            display: block;
            // width: 2rem;
            // height: .8rem;
            width: 2.5rem;
            height: 0.8rem;
            background:#FFC726;
            color: #B15F58;
            border-radius: .106667rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(177,95,88,1);
            line-height:17px;
            letter-spacing:1px;
        }
        .input{
            width: 4.266667rem;
            height: 100%;
            outline: none;
            border: none;
            margin-right: .266667rem;
        }
        input::-webkit-input-placeholder{
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(204,204,204,1);
            line-height:17px;
            letter-spacing:1px;
        }
    }
    .listItem:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #cccccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}
.backBtn{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 4.213333rem;
    .btn{
        width: 7.333333rem;
        height: 1.28rem;
        .xbtn{
            width: 100%;
            height: 100%;
            color: #fff;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            letter-spacing:1px;
            background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
        }
    }
}
</style>
